<template>
  <div class="menu-container">
    <el-menu ref="menu1" :collapse-transition="false" :unique-opened="true" :default-active="active">
      <sub-menu
        :menuSelect="custormMenuSelect"
        :menu-node="menu"
        :open-ids="openIds"
        :select-ids="selectIds"
        v-for="(menu, index) in treeData"
        :key="`menus-${index}`"
      />
    </el-menu>
  </div>
</template>

<script>
import SubMenu from './SubMenu'
const short = require('short-uuid')

export default {
  name: 'NavMenu',
  components: {
    SubMenu
  },
  props: {
    menus: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      active: '',
      openIds: [],
      selectIds: []
    }
  },
  computed: {
    treeData() {
      let isFirst = true
      const deepFn = (roots = [], parentNode = null) => {
        roots.forEach((item, index) => {
          const idKey = short.generate()
          item.isFirst = isFirst
          item.index = index
          item.opened = false
          item.idKey = idKey
          item.idKeyList = parentNode == null ? [idKey] : [...parentNode.idKeyList, idKey]
          item.level = parentNode == null ? 0 : parentNode.level + 1
          isFirst = false
          if (item.children && item.children.length > 0) {
            deepFn(item.children, item)
          }
        })
      }
      deepFn(this.menus, null)

      return this.menus
    },
    treeMap() {
      const dataMap = {}
      const dataMap1 = {}
      const treeData = this.treeData
      const deepFn = (roots = [], parentNode = null) => {
        roots.forEach((item, index) => {
          dataMap[item.idKey] = item
          dataMap1[item.name] = {}
          if (item.children && item.children.length > 0) {
            deepFn(item.children, item)
          }
        })
      }
      deepFn(treeData, null)
      console.log('dataMap1', JSON.stringify(dataMap1))
      return dataMap
    },
    treeMap1() {
      const dataMap = {}
      const treeData = this.treeData
      const deepFn = (roots = [], parentNode = null) => {
        roots.forEach((item, index) => {
          dataMap[item.name] = {
            title: item.title
          }
          if (item.children && item.children.length > 0) {
            deepFn(item.children, item)
          }
        })
      }
      deepFn(treeData, null)
      return dataMap
    },
    idKey() {
      return this.treeData[0].idKey
    }
  },
  mounted() {
    console.log('treeMap1', JSON.stringify(this.treeMap1))
  },
  methods: {
    // sub-menu 展开的回调
    menuOpen(index, indexPath) {
      if (this.selectIds.indexOf(index) === -1) {
        this.selectIds.push(index)
      }
      const menuItem = this.treeMap[index]
      this.openIds = menuItem.idKeyList
    },
    // sub-menu 收起的回调
    menuClose(index, indexPath) {
      const po = this.selectIds.indexOf(index)
      if (po !== -1) {
        this.selectIds.splice(po, 1)
      }
      const menuItem = this.treeMap[index]
      this.openIds = menuItem.idKeyList
    },
    // 菜单选中
    menuSelect(index, indexPath) {
      // const menuItem = this.treeMap[index];
      // const { url, title, idKey } = menuItem;
      // // console.log(menuItem);
      // this.openIds = menuItem.idKeyList;
      // this.$emit("change", { url, title, idKey });
    },
    // 菜单选中
    custormMenuSelect(menuItem) {
      const obj2 = { ...menuItem }
      delete obj2.children
      delete obj2.idKeyList
      delete obj2.icon
      this.openIds = menuItem.idKeyList
      // console.log(menuItem);
      this.$refs.menu1.open(menuItem.idKey)
      this.$emit('change', obj2)
    }
  },
  watch: {
    idKey: {
      handler(val) {
        this.active = val
      },
      immediate: true
    }
  }
}
</script>

<style scoped></style>
